.container {
	position: relative;
/* 	top: 0;
	right: 0;
	bottom: 0;
	left: 0; */
	margin: 0 auto;
	width: 98vw;
	height: 98vh;
	border: 5px solid grey;
	text-align: center;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	justify-content: center;
}

#bellow {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	margin-top: 70vh;
	justify-content: center;
}

#map {
	z-index: 1;
	margin: 0 auto;
	display: inline-block;
}

#map>div {
	width: 8vw;
	height: 8vw;
	border: 0.5px solid #C0C0C0;
	z-index: 2;
}

.plaint {
	background-color: white;
	position: absolute;
}

.active {
	background-color: red;
	position: absolute;
}

.fixed {
	background-color: #999;
	position: absolute;
}

input#scores {
	font-size: 1em;
}

div#command {
	height: 30vw;
	width: 40vw;
}

button.cmd {
	width: 13vw;
	height: 13vw;
	border-radius: 5px;
	font-size: 2em;
	margin: 5px;
}

div#aspect {
	height: 30vw;
	width: 40vw;
	margin-left: 5vw;
	margin-right: 3vw;
}

button.aspect {
	width: 13vw;
	height: 13vw;
	border-radius: 5px;
	font-size: 1em;
	font-size: 2em;
}

#info {
	position: absolute;
	margin: 45px 45px 45px 45px;
	font: 5em YaHei bold;
	text-align: left;
	color: #7AB893;
	width: 90vw;
	height: 68vh;
	z-index: 3;
	/* margin-left: 30%; */
}

kbd {
	margin: 5px;
	width: 30px;
	height: 30px;
	border: solid 1px #A0A0A0;
	font: 1em bold YaHei;
	background-color: #A0A0A0;
}

body {
	font-size: 1em;
	background: #35393d;
}

#botm {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 2vh;
}

#record {
	width: 60vw;
	font-size: 2em;
	display: flex;
	flex-direction: row;
	margin-top: 2vh;
}

#record div:nth-child(2) {
	margin-left: 10vw;
}

#record div input {
	width: 20vw;
	font-size: 1em;
}

.btn {
	color: #0f1214;
	text-shadow: 0 1px 0 #484f58;
	border: 1px solid #202124;
	box-shadow: 0 1px 0 #616a74 inset, 0 1px 5px #212528;
	background: -webkit-linear-gradient(top, #474d54, #2f363d);
	background: -moz-linear-gradient(top, #474d54, #2f363d);
	background: -ms-linear-gradient(top, #474d54, #2f363d);
	background: -o-linear-gradient(top, #474d54, #2f363d);
	background: linear-gradient(top, #474d54, #2f363d);
}

.btn:hover {
	background: -webkit-linear-gradient(top, #5b6167, #30373e);
	background: -moz-linear-gradient(top, #5b6167, #30373e);
	background: -ms-linear-gradient(top, #5b6167, #30373e);
	background: -o-linear-gradient(top, #5b6167, #30373e);
	background: linear-gradient(top, #5b6167, #30373e);
}

.btn:active {
	box-shadow: 0 1px #484c50;
	background: -webkit-linear-gradient(top, #232930, #3c4249);
	background: -moz-linear-gradient(top, #232930, #3c4249);
	background: -ms-linear-gradient(top, #232930, #3c4249);
	background: -o-linear-gradient(top, #232930, #3c4249);
	background: linear-gradient(top, #232930, #3c4249);
}

.points,
.scores {
	outline: none;
	border: 1px solid #fff;
	color: #377D6A;
	padding: 4px 10px;
	border-radius: 4px;
	line-height: 1.2em;
	text-indent: 1vw;
}

#record div:nth-child(1) {
	margin-left: 10vw;
}

#record div:nth-child(2) {
	margin-left: 10vw;
}

.rd_lab {
	outline: none;
	border: 1px solid #fff;
	color: #fff;
	background: #7AB893;
	padding: 4px 4px;
	border-radius: 4px;
}

#tips{
	margin-left: 25vw;
}

#greeting{
	margin: 0 auto;
	text-align: center;
}
